<template>
	<view class="container">
		<template v-if="!isDev">
			<view class="contant yellow"
				:style="{backgroundImage:'url(' + imgUrl('/uploads/20250820/2f615f83d52fdc321db70fb9ea8e66c0.png') + ')'}"
				@click="lounge('E0807000001')">
				<view>
					<view class="title">
						休息室服务
					</view>
					<view class="description">
						预约/改期/取消
					</view>
				</view>
				<view class="contant-flex">
					<view class="contant-button">
						查看详情
					</view>
					<view class="contant-icon">
						<image :src="imgUrl('/uploads/20250820/0ca8ed37ff198d3e4616941976179046.png')"
							mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
			<view class="contant blue"
				:style="{backgroundImage:'url(' + imgUrl('/uploads/20250820/7bf4c01634553532ea76ff19194e7fe5.png') + ')'}"
				@click="lounge('E0807000002')">
				<view>
					<view class="title">
						机场贵宾服务
					</view>
					<view class="description">
						预约/改期/取消
					</view>
				</view>
				<view class="contant-flex">
					<view class="contant-button">
						查看详情
					</view>
					<view class="contant-icon">
						<image :src="imgUrl('/uploads/20250820/85c9c3d95dc93d929d6e8ac2fc877e11.png')"
							mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
			<view class="contant pink"
				:style="{backgroundImage:'url(' + imgUrl('/uploads/20250820/056738c14744ce3e936a5bde74afa19f.png') + ')'}"
				@click="lounge('E0807000003')">
				<view>
					<view class="title">
						礼宾车接送服务
					</view>
					<view class="description">
						预约/改期/取消
					</view>
				</view>
				<view class="contant-flex">
					<view class="contant-button">
						查看详情
					</view>
					<view class="contant-icon">
						<image :src="imgUrl('/uploads/20250820/cd62adaeb68e5636675c8028b1a6c6e8.png')"
							mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
		</template>
		<template v-if="isDev">
			<view class="contant yellow"
				:style="{backgroundImage:'url(' + imgUrl('/uploads/20250820/2f615f83d52fdc321db70fb9ea8e66c0.png') + ')'}"
				@click="lounge('E0907003001')">
				<view>
					<view class="title">
						境内机场高铁休息室服务
					</view>
					<view class="description">
						预约/改期/取消
					</view>
				</view>
				<view class="contant-flex">
					<view class="contant-button">
						查看详情
					</view>
					<view class="contant-icon">
						<image :src="imgUrl('/uploads/20250820/0ca8ed37ff198d3e4616941976179046.png')"
							mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
			<view class="contant blue"
				:style="{backgroundImage:'url(' + imgUrl('/uploads/20250820/7bf4c01634553532ea76ff19194e7fe5.png') + ')'}"
				@click="lounge('E0907003002')">
				<view>
					<view class="title">
						境外机场休息室
					</view>
					<view class="description">
						预约/改期/取消
					</view>
				</view>
				<view class="contant-flex">
					<view class="contant-button">
						查看详情
					</view>
					<view class="contant-icon">
						<image :src="imgUrl('/uploads/20250820/85c9c3d95dc93d929d6e8ac2fc877e11.png')"
							mode="aspectFill">
						</image>
					</view>
				</view>
			</view>

			<view class="contant pink"
				:style="{backgroundImage:'url(' + imgUrl('/uploads/20250820/056738c14744ce3e936a5bde74afa19f.png') + ')'}"
				@click="lounge('E0907003003')">
				<view>
					<view class="title">
						境内接送机站服务
					</view>
					<view class="description">
						预约/改期/取消
					</view>
				</view>
				<view class="contant-flex">
					<view class="contant-button">
						查看详情
					</view>
					<view class="contant-icon">
						<image :src="imgUrl('/uploads/20250820/cd62adaeb68e5636675c8028b1a6c6e8.png')"
							mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
			<view class="contant yellow"
				:style="{backgroundImage:'url(' + imgUrl('/uploads/20250820/2f615f83d52fdc321db70fb9ea8e66c0.png') + ')'}"
				@click="lounge('E0907003004')">
				<view>
					<view class="title">
						贵宾要客通服务
					</view>
					<view class="description">
						预约/改期/取消
					</view>
				</view>
				<view class="contant-flex">
					<view class="contant-button">
						查看详情
					</view>
					<view class="contant-icon">
						<image :src="imgUrl('/uploads/20250820/0ca8ed37ff198d3e4616941976179046.png')"
							mode="aspectFill">
						</image>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>
<script setup>
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		ref
	} from "vue";
	import {
		imgUrl
	} from '../../utils/global';
	const isDev = ref(true)
	onLoad(async (options) => {
		isDev.value = options.isDev
	})
	// 休息室服务
	const lounge = (type) => {
		console.log(type, "type")
		uni.navigateTo({
			url: "/pages/travel/lounge?type=" + type,
		});
	}
</script>

<style scoped lang="scss">
	.container {
		background: #F8F8FA;
		padding: 30rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.contant {
		margin-bottom: 17rpx;
		padding: 30rpx;
		border-radius: 24rpx;
		background-size: cover;
		box-shadow: 2rpx 3rpx 35rpx 1rpx rgba(226, 146, 148, 0.29);
	}

	.title {
		font-size: 34rpx;
		// font-weight: 700;
	}

	.description {
		font-size: 22rpx;
		margin-bottom: 30rpx;
	}

	.contant-button {
		color: #fff;
		font-size: 24rpx;
		line-height: 25rpx;
		text-align: center;
		padding: 14rpx 20rpx;
		font-style: normal;
		text-transform: none;
		border-radius: 32.5rpx;
		display: inline-block;
	}

	.contant-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contant-icon {
		width: 96rpx;
		height: 96rpx;

		image {
			width: 100%;
			height: 100%;
			vertical-align: bottom;
		}
	}

	.yellow {
		.contant-button {
			background: linear-gradient(270deg, #EE9551 0%, #EFD9CA 100%);
		}

		.title {
			color: #E89C46
		}

		.description {
			color: #D9A569
		}
	}

	.blue {
		.contant-button {
			background: linear-gradient(270deg, #61A0FC 0%, #C3C8FB 100%);
		}

		.title {
			color: #3484FC
		}

		.description {
			color: #63AEE8
		}
	}

	.pink {
		.contant-button {
			background: linear-gradient(270deg, #E5719F 0%, #F3C9DB 100%);
		}

		.title {
			color: #EF5C97
		}

		.description {
			color: #F66A95
		}
	}
</style>